|
1
|
|
|
import { useContext } from 'react'; |
|
2
|
|
|
import RealTimeContext from '../helpers/RealTimeContext'; |
|
3
|
|
|
import { Label, ToggleSwitch } from 'flowbite-react'; |
|
4
|
|
|
import { toast } from 'react-toastify'; |
|
5
|
|
|
|
|
6
|
|
|
type Props = { |
|
7
|
|
|
timerRef: React.MutableRefObject<number | null>; |
|
8
|
|
|
setTrigger: React.Dispatch<React.SetStateAction<number>> |
|
9
|
|
|
} |
|
10
|
|
|
|
|
11
|
|
|
export default function RealTimeUpdate({timerRef, setTrigger} : Props) { |
|
12
|
3 |
|
const {realTime, setRealTime, isLowRes, setIsLowRes} = useContext(RealTimeContext); |
|
13
|
|
|
|
|
14
|
3 |
|
const updateRealTime = () => { |
|
15
|
|
|
setRealTime(!realTime); |
|
16
|
2 |
|
if (realTime) |
|
17
|
|
|
{ |
|
18
|
|
|
stopTimer(); |
|
19
|
|
|
setIsLowRes(false); |
|
20
|
|
|
toast.info("Real Time Tracking stopped, switching back to higher resolution.") |
|
21
|
|
|
} else { |
|
22
|
|
|
startTimer(); |
|
23
|
|
|
setIsLowRes(true); |
|
24
|
|
|
|
|
25
|
|
|
toast.info("Real Time Tracking initiated, switching to low resolution to save resources.") |
|
26
|
|
|
} |
|
27
|
|
|
} |
|
28
|
|
|
|
|
29
|
3 |
|
const startTimer = () => { |
|
30
|
2 |
|
if (!timerRef.current) |
|
31
|
|
|
{ |
|
32
|
|
|
timerRef.current = setInterval(() => { |
|
33
|
|
|
setTrigger((prev: number) => prev + 1); |
|
34
|
|
|
}, 1000); |
|
35
|
|
|
} |
|
36
|
|
|
}; |
|
37
|
|
|
|
|
38
|
3 |
|
const stopTimer = () => { |
|
39
|
2 |
|
if (timerRef.current) |
|
40
|
|
|
{ |
|
41
|
|
|
clearInterval(timerRef.current); |
|
42
|
|
|
timerRef.current = null; |
|
43
|
|
|
} |
|
44
|
|
|
}; |
|
45
|
|
|
|
|
46
|
3 |
|
return ( |
|
47
|
|
|
<> |
|
48
|
|
|
<div className="flex flex-col items-center justify-center my-2 py-2 bg-red-100 rounded-md w-full sm:max-w-xl mx-auto"> |
|
49
|
|
|
<Label htmlFor="realtimetoggle">Vill du uppdatera kartan i realtid?</Label> |
|
50
|
|
|
<ToggleSwitch id="realtimetoggle" className='mx-auto' data-testid="realtimeupdate" checked={realTime} onChange={updateRealTime}>Uppdatera i realtid?</ToggleSwitch> |
|
51
|
|
|
</div> |
|
52
|
|
|
|
|
53
|
|
|
{ realTime && |
|
54
|
|
|
<div className="flex flex-col items-center justify-center my-2 py-2 bg-blue-100 rounded-md w-full sm:max-w-xl mx-auto"> |
|
55
|
|
|
<Label htmlFor="forcehighres">Vill du tvinga högre upplösning på markörer och karta?</Label> |
|
56
|
|
|
<ToggleSwitch id="forcehighres" color="blue" className='mx-auto' checked={!isLowRes} onChange={() => setIsLowRes(!isLowRes)}>Högre upplösning?</ToggleSwitch> |
|
57
|
|
|
</div> |
|
58
|
|
|
} |
|
59
|
|
|
</> |
|
60
|
|
|
) |
|
61
|
|
|
} |
|
62
|
|
|
|
KarlComSe /
SvenskaElsparkcyklarAB
